<template>
  <div>
    考勤
    <hr>
    <input type="file" @change="changeEvent">
    <img :src="imageSrc" alt="">
  </div>
</template>
<script>
import Cos from 'cos-js-sdk-v5'
/*
1:安装 cos-js-sdk-v5
2：导入
3：实例化（需要使用密钥）
4:调用上传方法
*/
const cos = new Cos({
  SecretId: 'AKIDNXR8bpeSF1JL8EyZopxRfdHgqGUeuEn8',
  SecretKey: 'HJ9mAbQEn7jgjY9swEI6yAamk7MN8hty'
})
export default {
  data() {
    return {
      imageSrc: ''
    }
  },
  methods: {
    changeEvent(e) {
      console.log(e.target.files[0])
      // let that=this
      cos.putObject(
        {
          Bucket: 'dhf81-1305249343' /* 必须存储桶 */,
          Region: 'ap-guangzhou' /* 存储桶所在地域，必须字段 */,
          Key: Date.now() + '' /* 必须 */,
          StorageClass: 'STANDARD',
          Body: e.target.files[0], // 上传文件对象
          onProgress: (progressData) => {
            console.log(JSON.stringify(progressData))
          }
        },
        (err, data) => {
          if (!err) {
            this.imageSrc = 'http://' + data.Location
          }
          console.log(err || data)
        }
      )
    }
  }
}
</script>
<style></style>
